<template>
	<view>
		<u-tabs :list="tabBars" line-width="60" :current="tabIndex" @change="tapTab"></u-tabs>
		<swiper :current="tabIndex" class="swiper-box" :duration="300" @change="changeTab">
			<swiper-item>
				<user-info :user="basicData" />
			</swiper-item>
			<!-- <swiper-item>
				<view v-for="(item, index) in expandData" :key="index">
					<view class="space">
						<view class="row-title row-title-grey">{{item.name}}</view>
						<view v-if="item.values.length > 0">
							<switch style="transform:scale(0.8)" :checked="item.values[0].value == 'Y' ? true : false" :disabled="true"></switch>
						</view>
					</view>
				</view>
			</swiper-item> -->
			<swiper-item>
				<view v-if="orgData != null">
					<view class="space">
						<text class="row-title">{{$t('app.my.orgName')}}：</text>
						<text>{{orgData.name}}</text>
					</view>
					<view class="space">
						<text class="row-title">{{$t('app.my.orgPath')}}：</text>
						<text>{{orgData.pathName}}</text>
					</view>
				</view>
				<view class="no-data" v-else>
					<u-empty icon="../../../static/images/empty_data.png" />
				</view>
			</swiper-item>
			<swiper-item>
				<view class="space" v-if="postData != null">
					<uni-table border stripe>
						<uni-tr>
							<uni-th>{{$t('app.my.postName')}}</uni-th>
							<uni-th>{{$t('app.my.isMainPost')}}</uni-th>
							<uni-th>{{$t('app.my.isPrincipal')}}</uni-th>
						</uni-tr>
						<uni-tr v-for="item in postData" :key="item.id">
							<uni-td>{{ item.name }}</uni-td>
							<uni-td>{{ item.isMainPost | codeFormat(yesOrNoOptions)}}</uni-td>
							<uni-td>{{ item.isPrincipal | codeFormat(yesOrNoOptions)}}</uni-td>
						</uni-tr>
					</uni-table>
				</view>
				<view class="no-data" v-else>
					<u-empty icon="../../../static/images/empty_data.png" />
				</view>
			</swiper-item>
			<swiper-item>
				<view class="space" v-if="roleData.length > 0">
					<uni-table border stripe>
						<uni-tr>
							<uni-th>{{$t('app.my.roleName')}}</uni-th>
							<uni-th>{{$t('app.my.subSystem')}}</uni-th>
							<uni-th>{{$t('app.my.roleSource')}}</uni-th>
						</uni-tr>
						<uni-tr v-for="item in roleData" :key="item.id">
							<uni-td>{{ item.name }}</uni-td>
							<uni-td>{{ item.subSystemName }}</uni-td>
							<uni-td>{{ item.source }}</uni-td>
						</uni-tr>
					</uni-table>
				</view>
				<view class="no-data" v-else>
					<u-empty icon="../../../static/images/empty_data.png" />
				</view>
			</swiper-item>
			<swiper-item>
				<view class="space" v-if="groupData.length > 0">
					<uni-table border stripe>
						<uni-tr>
							<uni-th>{{$t('app.my.groupName')}}</uni-th>
						</uni-tr>
						<uni-tr v-for="item in groupData" :key="item.id">
							<uni-td>{{ item.name }}</uni-td>
						</uni-tr>
					</uni-table>
				</view>
				<view class="no-data" v-else>
					<u-empty icon="../../../static/images/empty_data.png" />
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import userInfo from "@/components/base/user-info.vue"
	import { getUserInfo } from '@/api/platform/common.js'
	import constants from '@/utils/constants.js'
	
	export default {
		components: {
			userInfo
		},
		data() {
			return {
				tabIndex: 0,
				tabBars: [
					{ name: this.$t('app.my.basicInfo') },
					// { name: this.$t('app.my.extendProps') },
					{ name: this.$t('app.my.orgInfo') },
					{ name: this.$t('app.my.postInfo') },
					{ name: this.$t('app.my.roleInfo') },
					{ name: this.$t('app.my.groupInfo') }
				],
				yesOrNoOptions: constants.yesOrNoOptions,
				basicData: {},
				expandData: [],
				orgData: {},
				postData: [],
				roleData: [],
				groupData: []
			}
		},
		onLoad() {
			this.init()
		},
		methods: {
			init() {
				getUserInfo().then(res=>{
					this.basicData = res.data
					this.expandData = res.variables.partyAttrs
					this.orgData = res.variables.partyOrg
					this.postData = res.variables.partyPositions
					this.roleData = res.variables.partyRoles
					this.groupData = res.variables.partyGroups
				})
			},
			async changeTab(e) {
				this.tabIndex = e.target.current
			},
			async tapTab(index) {
				this.tabIndex = index.index
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #fff;
		font-size: $uni-font-size-base;
	}
	
	.swiper-box {
		/* #ifdef H5 */
		height: calc(100vh - 88px);
		/* #endif */
		/* #ifdef APP-PLUS */
		height: calc(100vh - 44px);
		/* #endif */
	}
	
	.space {
		margin: 12px;
	}
	
	.row-title {
		color: $uni-text-color-grey;
	}
	
	.no-data {
		display: flex;
		min-height: 150px;
		background-color: #FFFFFF;
		justify-content: center;
		align-items: center;
		text-align: center;
		font-size: 14px;
		color: #353535;
	}
</style>